<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>WebVR Example</title>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene vr-mode-ui="enabled: true">
<a-camera position="0 1.6 0"></a-camera>
<a-box position="0 0 -5" color="red"></a-box>
<a-sky color="lightblue"></a-sky>
</a-scene>
<script>
AFRAME.registerComponent('move', {
tick: function() {
// ユーザーのキーボードやマウスの入力に基づいて移動する処理を記述します
// この例では、キーボードの矢印キーに応じてカメラを移動させています
var cameraEl = this.el.querySelector('a-camera');
var position = cameraEl.getAttribute('position');
var moveAmount = 0.1; // 移動量の設定
if (this.keys.ArrowUp) {
position.z -= moveAmount;
}
if (this.keys.ArrowDown) {
position.z += moveAmount;
}
if (this.keys.ArrowLeft) {
position.x -= moveAmount;
}
if (this.keys.ArrowRight) {
position.x += moveAmount;
}
cameraEl.setAttribute('position', position);
},
// キーボードの入力を受け取るためのイベントリスナーを設定します
init: function() {
this.keys = {};
var self = this;
window.addEventListener('keydown', function(event) {
self.keys[event.key] = true;
});
window.addEventListener('keyup', function(event) {
self.keys[event.key] = false;
});
}
});
</script>
<script>
// カメラに移動コンポーネントを追加します
document.querySelector('a-camera').setAttribute('move', '');
</script>
</body>
</html>
